//初始化
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
}
body,
html {
  height: 100%;
}
//声明变量
@rootSize: 19.2rem;
.box {
  display: flex;
  justify-content: space-between;
  min-width: 1024px;
  max-width: 1920px;
  background-image: linear-gradient(90deg, #2b80a0, #eaf9bb);
  background-repeat: no-repeat;
  height: 100%;
  padding: (10 / @rootSize);
  .information {
    flex: 2;
    margin: (10 / @rootSize);
    display: flex;
    flex-direction: column;
    padding: 0 (20 / @rootSize);
    .order {
      display: flex;
      justify-content: space-between;
      padding: (10 / @rootSize);
      margin-bottom: (20 / @rootSize);
      font-size: (25 / @rootSize);
      li {
        height: (50 / @rootSize);
        line-height: (50 / @rootSize);
        white-space: nowrap;
        input {
          height: (50 / @rootSize);
          vertical-align: top;
          outline: none;
        }
        input::placeholder {
          font-size: (25 / @rootSize);
        }
      }
      li:nth-child(-n + 3) {
        input {
          width: (250 / @rootSize);
          margin-left: (20 / @rootSize);
          border: 1px solid #267c9f;
          border-radius: (5 / @rootSize);
          padding-left: (20 / @rootSize);
          font-size: (25 / @rootSize);
        }
      }
      li:last-child {
        input {
          width: (80 / @rootSize);
          background-color: #237b9e;
          font-size: (25 / @rootSize);
          color: #fff;
          border: 0;
          border-radius: (5 / @rootSize);
        }
        input:hover {
          background-color: #4b95a5;
        }
      }
    }
    .menu {
      flex: 1;
      table {
        width: 100%;
        border-collapse: collapse;
        tr {
          border: 1px solid #aad0b2;
          display: flex;
          justify-content: space-between;
          height: (50 / @rootSize);
          line-height: (50 / @rootSize);
        }
        thead {
          tr {
            border-radius: (10 / @rootSize);
            background-image: linear-gradient(90deg, #93c2af, #5da3a9);
            th {
              border-left: 1px solid #aad0b2;
              flex: 1;
              font-size: (30 / @rootSize);
            }
            th:first-child {
              border: 0;
            }
          }
          tr.change {
            border-radius: (10 / @rootSize) (10 / @rootSize) 0 0;
          }
        }
        tbody {
          tr {
            background-image: linear-gradient(90deg, #5da3a9, #93c2af);
            margin-top: -1px;
            td {
              border-left: 1px solid #aad0b2;
              flex: 1;
              text-align: center;
            }
            td:first-child {
              border: 0;
            }
          }
          tr:last-child {
            border-radius: 0 0 (10 / @rootSize) (10 / @rootSize);
          }
        }
      }
    }
  }
  .chart {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin: (10 / @rootSize);
    .up {
      flex: 1;
      margin-bottom: (20 / @rootSize);
    }
    .down {
      flex: 1;
    }
  }
}
